{% extends 'bootstrap/base.html' %}

{% block title %}
    {% if title %}{{ title }} - CTF{% else %}Welcome to CTF Russkiy Defence {% endif %}
{% endblock %}

{% block navbar %}
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="{{ url_for('index') }}">Service</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="{{ url_for('index') }}">Home</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    {% if current_user.is_anonymous %}
                    <li><a href="{{ url_for('login') }}">Login</a></li>
                    {% else %}
                    <li><a href="{{ url_for('user') }}">Profile</a></li>
                    <li><a href="{{ url_for('logout') }}">Logout</a></li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>
{% endblock %}

{% block content %}
    <div class="container">
        <div id="alert">
            {% with messages = get_flashed_messages() %}
                {% if messages %}
                    {% for message in messages %}
                        <div class="alert alert-info" role="alert">{{ message }}</div>
                    {% endfor %}
                {% endif %}
            {% endwith %}
        </div>
        {% block app_content %}{% endblock %}
    </div>
{% endblock %}

{% block scripts %}
    {{ super() }}
    <script type="module" src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>
    {% if current_user.is_anonymous == false %}
        <script>
        var flag = document.getElementById("name");
        flag.addEventListener('keypress', function (event) {
            if (event.key === "Enter") {
                event.preventDefault();
                $.ajax({
                    url: "{{ url_for('api.create_flag', uid=current_user.id) }}",
                    type: "POST",
                    beforeSend: function (xhr) {
                        var access_token = 'Bearer ' + Cookies.get('access_token');
                        xhr.setRequestHeader('Authorization', access_token);
                    },
                    data: {
                        flag: flag.value
                    },
                    dataType: "json",
                    success: function (response) {
                        console.log(response);
                        AddRow(response);
                    },
                    error: function (response) {
                        FlashMessage(response)
                    }
                });
            }
        })

        function AddRow(response) {
            var table = document.getElementById("flag_table");
            if (typeof table == "undefined")
                table = document.createElement('flag_table');

            var totalRowCount = table.rows.length;
            var row = table.insertRow();
            var num_cell = row.insertCell(0);
            var value_cell = row.insertCell(1);
            var created_cell = row.insertCell(2);

            num_cell.innerHTML = totalRowCount;
            value_cell.innerHTML = response.flag;
            created_cell.innerHTML = response.created_at;
        };

        function FlashMessage(response) {
            var alert = document.getElementById("alert");
            alert.innerHTML += '<div class="alert alert-info" role="alert"> Error: ' + response.responseJSON.message + '</div>';
        };
    </script>
    {% endif %}
{% endblock %}